<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.0 - Filter Formatter: select2 (beta)</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
	<script src="js/jquery-ui.min.js"></script>
	<link rel="stylesheet" href="../docs/css/jq.css">
	<link href="../docs/css/prettify.css" rel="stylesheet">
	<script src="../docs/js/prettify.js"></script>
	<script src="../docs/js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link href="../css/theme.blue.css" rel="stylesheet">
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>

	<!-- Select2 code -->
	<link href="css/select2-3.4.6.min.css" rel="stylesheet">
	<script src="js/select2-3.4.6.min.js"></script>
	<script src="../js/widgets/widget-filter-formatter-select2.js"></script>

<script id="js">$(function(){

	$('.tablesorter').tablesorter({
		theme: 'blue',
		widthFixed: true,
		widgets: ['zebra', 'stickyHeaders', 'filter'],
		widgetOptions : {
			// Use the $.tablesorter.storage utility to save the most recent filters
			filter_saveFilters : true,
			// jQuery selector string of an element used to reset the filters
			filter_reset : 'button.reset',
			// add custom selector elements to the filter row
			filter_formatter : {

				// Alphanumeric (match)
				0 : function($cell, indx){
					return $.tablesorter.filterFormatter.select2( $cell, indx, {
						match : true,         // adds "filter-match" to header
						cellText : 'Match: ', // Cell text
						width: '85%',         // adjusted width to allow for cell text
						value: ['abc', 'def'] // initial values
					});
				},

				// Alphanumeric (exact)
				1 : function($cell, indx){
					return $.tablesorter.filterFormatter.select2( $cell, indx, {
						match : false // exact match only
					});
				}
			},

			// option added in v2.16.0
			filter_selectSource : {
				// Alphanumeric match (prefix only)
				// added as select2 options (you could also use select2 data option)
				0 : function(table, column) {
					return ['abc', 'def', 'zyx'];
				}
			}
		}

	});

	});
</script>

</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>Filter Formatter: select2 (beta)</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p></p>
	<br>

	<div id="root" class="accordion">

		<h3><a href="#">Notes</a></h3>
		<div>
			<ul>
				<li>Updated in <span class="version updated">v2.19.0</span> to properly escape regexp characters. See <a href="https://github.com/Mottie/tablesorter/issues/796">issue #796</a> for details.</li>
				<li>Updated in <span class="version updated">v2.16.3</span> to allow adding an initial value to the select2 plugin.</li>
				<li>This is a demo of the select2 filter formatter code.</li>
				<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
				<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+</li>
			</ul>
		</div>

		<h3><a href="#">Options</a></h3>
		<div>
			There are only two filter formatter options, the rest are all <a href="http://ivaynberg.github.io/select2/#documentation">select2 plugin options</a> (defaults shown below):
			<table class="tablesorter-blue">
				<thead>
					<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
				</thead>
				<tbody>
					<tr><th colspan="3">Select2 FilterFormatter options</th></tr>
				</tbody>
				<tbody>

					<tr>
						<td>cellText</td>
						<td>''</td>
						<td>Text added within a <code>&lt;label&gt;</code> before the input.</td>
					</tr>

					<tr>
						<td>match</td>
						<td>true</td>
						<td>Adds a "filter-match" class name to the header &amp; modifies the search</td>
					</tr>

					<tr>
						<td>value</td>
						<td>[ ]</td>
						<td>Set the initial select2 values within this array. These values are restored when the filters are reset.</td>
					</tr>

				</tbody>
				<tbody>
					<tr><th colspan="3">Select2 plugin (modified defaults)</th></tr>
				</tbody>

				<tbody>

					<tr>
						<td>multiple</td>
						<td>true</td>
						<td>Allow multiple selections. This option can be modified.</td>
					</tr>

					<tr>
						<td>width</td>
						<td>'100%'</td>
						<td>Reduce this width if you add anything cellText, or the text and the input will be on separate lines.</td>
					</tr>

				</tbody>
			</table>

			This is an example of how to set these options:
			<pre class="prettyprint lang-js">filter_formatter : {
  // default settings on first column
  0 : function($cell, indx){
    return $.tablesorter.filterFormatter.select2( $cell, indx, {
      // *** select2 filter formatter options ***
      cellText : '',    // Text (wrapped in a label element)
      match    : true,  // adds "filter-match" to header & modifies search
      value    : [],    // initial select2 values

      // *** ANY select2 options can be included below ***
      // (showing default settings for this formatter code)
      multiple : true,  // allow multiple selections
      width    : '100%' // reduce this width if you add cellText
    });
  }
}</pre>
		</div>
	</div>

	<p>

	<h1>Demo</h1>
<div id="demo"><button class="reset">Reset Search</button>
<table class="tablesorter">
	<thead>
		<tr>
			<!-- filter-match is automatically added by select2 "match" option -->
			<th>AlphaNumeric (match)</th>
			<th class="filter-onlyAvail">AlphaNumeric (exact; only available)</th>
			<th>Numeric</th>
			<th>Animals</th>
			<th>Sites</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>abc 123</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
		<tr><td>abc 1</td><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
		<tr><td>abc 9</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
		<tr><td>zyx 24</td><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
		<tr><td>abc 11</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
		<tr><td>def 2</td><td>def 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
		<tr><td>abc 9</td><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
		<tr><td>def 10</td><td>def 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
		<tr><td>zyx 1</td><td>zyx 1</td><td>99</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
		<tr><td>zyx 12</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
	</tbody>
</table></div>

	<h1>Header</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;!-- jQuery --&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- Tablesorter: required --&gt;
&lt;link href=&quot;../css/theme.blue.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;

&lt;!-- Select2 code --&gt;
&lt;link href=&quot;http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/widgets/widget-filter-formatter-select2.js&quot;&gt;&lt;/script&gt;</pre>
	</div>

	<h1>HTML</h1>
	<div id="html">
		<pre class="prettyprint lang-html"></pre>
	</div>

	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

</div>

</body>
</html>
